<template>
  <div>
    <div class="flex-start">
      <el-input size="small" class="m-r-10" placeholder="输入关键字"
                style="width: 300px;" v-model="search.queryStr"/>
      <el-button size="small" icon="el-icon-search" type="primary" @click="query">查询</el-button>
    </div>
    <el-table v-if="refreshFlag > 0" ref="fillingMachineSelectContentTableRef" class="my-table m-t-30 w-100"
              :data="data" v-loading="loading" height="350"
              border :header-cell-style="{background:'#eee',color:'#000'}">
      <el-table-column align="center" width="43">
        <template v-slot="scope">
          <el-checkbox v-model="scope.row._selected" @change="selectChange">{{ '' }}</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column label="加注机编号" width="180">
        <template v-slot="scope">{{ scope.row.macCode | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="加注站名称">
        <template v-slot="scope">{{ scope.row.siteName | defaultValue }}</template>
      </el-table-column>
      <el-table-column prop="ureaPrice" label="销售单价(元)" width="180"/>
    </el-table>
    <app-pagination ref="paginationRef" :total="total" :page-size="page.size"
                    class="m-t-20" @change="pageChange"/>
    <div class="dividing-line m-t-30"></div>
    <div class="m-t-30 flex-end">
      <el-button type="primary" plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </div>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {getPage} from "@/api/business/filling-machine";
import {equals, isTrue, getRecords, getTotal, isListEmpty} from "@/util/common-util";

export default {
  name: "filling-machine-select-content",
  components: {AppPagination},
  props: {
    initSelectList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      data: [],
      search: {
        queryStr: null
      },
      page: {
        size: 20,
        current: 1
      },
      total: 0,
      refreshFlag: 1,
      selectList: [],
    }
  },
  created() {
    this.query()
  },
  methods: {
    cancel() {
      this.$emit("hide")
    },
    query() {
      this.loading = true
      getPage(this.page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.initSelected()
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
    initSelected() {
      for (const item of this.data) {
        item._selected = false
      }
      if (isListEmpty(this.initSelectList)) return
      for (const item of this.data) {
        for (const selectItem of this.initSelectList) {
          if (selectItem.id == item.id) {
            item._selected = true
          }
        }
      }
    },
    selectChange() {
      this.refreshFlag = 0
      this.$nextTick(() => {
        this.refreshFlag = 1
      });
    },
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    save() {
      this.selectList = []
      for (const item of this.data) {
        if (isTrue(item._selected)) {
          this.selectList.push({id: item.id, macCode: item.macCode})
        }
      }
      this.$emit('select', this.selectList)
      this.$emit("hide")
    }
  }
}
</script>
<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
